import React from "react";
import Chart from "echarts-for-react";
import style from "./Echarts_tu.less";


class Echarts_tuSave extends React.Component {
    componentDidMount() {
        console.log(Chart)

    }



    setOption = () => {
        let data = this.props.data
        return {

            tooltip: {
                trigger: 'axis',
                formatter: function (params, ticket, callback) {

                    var res = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {
                        if (params[i].seriesType === 'line') {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                        } else {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                        }
                    }
                    return res;

                }
            },

            grid: {
                top:"6%",
                left: '3%',
                right: '6%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',

                axisTick: {
                    alignWithLabel: true
                },
                data: data.xAxis?data.xAxis:[]
            },
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }
                , {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'filter',
                start: 0,
                end: 100

            }],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    },
                    name: data.unit?data.unit:'',
                   
                    max: function (value) {
                        return value.max > Number(data.standard?data.standard:0) ? Number(Number(value.max) * 2) : (Number(data.standard?data.standard:0) * 2)
                    }

                }

            ],

            series: [
                {
                    name: "实时值",
                    type: 'line',
                  
                 
                    data: data.yAxis?data.yAxis:[],
                    itemStyle: {
                        color: "red"
                    },
                    lineStyle: { color: 'red', type: 'dashed' },
                    markLine: {
                        data: [
                            { yAxis: data.standard?data.standard:0, name: '标准值' }
                        ]
                      
                    },

                },

                {

                    type: 'line',
                    markLine: {
                        data: [
                            { yAxis: data.standard2 ? data.standard2 : data.standard?data.standard:0, name: '标准值' }
                        ]
                       
                    },

                }

            ]
        }



    }

    render() {
        console.log(this.props)
        return (

            <Chart option={this.setOption()} notMerge lazyUpdate className={style.main}
                style={{height:'65vh'}}
            />




        );
    }

}

export default Echarts_tuSave;
